<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
		<script src="js/tailwindcss.js"></script>
	</head>
	<style>
		body,
		.mui-content {
			background: url("images/blind-box-bg.jpg") no-repeat center;
			background-size: 100%;
			height: 95vh;
		}

		/*去掉默认样式*/
		.swiper-button-prev:after {
			display: none;
		}

		.swiper-button-next:after {
			display: none;
		}

		/*自定义样式*/
		.swiper-button-prev {
			width: 54px;
			height: 54px;
			background: url('images/zuo.png') no-repeat center;
			background-size: 80% 80%;
			left: 10px;
		}

		.swiper-button-next {
			width: 54px;
			height: 54px;
			background: url('images/you.png') no-repeat center;
			color: #ff4f00;
			background-size: 80% 80%;
			right: 10px;
		}

		.swiper_01 img {
			margin-top: 2.5rem;
			width: 12.5rem;
			height: 12.5rem;
		}

		.swiper_01 .swiper-slide {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		.blind-box-animation {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: -4.375rem;
		}

		.blind-box-animation img {
			width: 12.5rem;
		}

		.view-blind-box {
			position: absolute;
			right: 20%;
			bottom: 20%;
			width: 3.5rem !important;
			height: 3.5em !important;
			animation: zoom 2s infinite;
		}

		.blind-box-btn {
			animation: zoom1 2s infinite;
		}

		@keyframes zoom {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}

			100% {
				transform: scale(1);
			}
		}

		@keyframes zoom1 {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.1);
			}

			100% {
				transform: scale(1);
			}
		}

		.swiper-slide1 {
			text-align: center;
			font-size: 18px;
			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			transition: 300ms;
			transform: scale(0.8);
		}

		.swiper-slide-active,
		.swiper-slide-duplicate-active {
			transform: scale(1);
		}

		#re-draw-card {
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			z-index: 999;
			padding: 3.75rem;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		#index-coupon {
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			z-index: 999;
			padding: 3.75rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
		}

		.re-draw-card-content {
			background: linear-gradient(to bottom, #f8c4ae, #fae8b8);
			min-height: 50vh;
			border-radius: 0.3125rem;
			margin-top: 6.25rem;
		}

		.coupon-content {
			background: url("images/pic_29.png") no-repeat center;
			background-size: 100% 100%;
			min-height: 55vh;
			border-radius: 0.3125rem;
			margin-top: 4.25rem;
			width: 100%;
		}
	</style>
	<body>
		<div class="mui-content">

			<div class="blind-box-animation">
				<img src="images/gif_01.gif" style="z-index: 999;" />
			</div>
			<div style="color: #ffffff;text-align: right;padding: 0.625rem;position: fixed;top: 0.625rem;right: 1.25rem;">
				<a href="game-rule.html" style="font-size: 0.875rem;color: #999999;">规则</a>
			</div>
			<!-- 重抽卡 -->
			<span style="position: fixed;left: 0.625rem; top: 3.125rem;z-index: 999;" onclick="showReDrawCard()">
				<img src="images/pic_103.png" alt="" srcset="" style="width: 3.125rem;" />
			</span>
			<!-- 优惠券 -->
			<span style="position: fixed;left: 0.625rem; top: 6.875rem;z-index: 999;" onclick="showCouponCard()">
				<img src="images/pic_102.png" alt="" srcset="" style="width: 3.125rem;" />
			</span>
			<div class="swiper mySwiper2 swiper_01">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
					<div class="swiper-slide">
						<a href="blind-box-details.html"><img src="images/pic_03.png" />
							<img src="images/pci_101.png" alt="" srcset="" class="view-blind-box" /></a>
					</div>
				</div>
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
			<div style="padding: 1.25rem;text-align: center;color: #ff4f00;font-size: 1rem;">
				<span> <span style="font-size: 1.25rem;">￥0.01 </span>/ 个</span>
			</div>
			<div id="activeIndexInnterHtml" style="padding: 1.25rem;color: #ffffff;"></div>
			<div style="padding: 0 0.625rem;">
				<div thumbsSlider="" class="swiper mySwiper swiper-active">
					<div class="swiper-wrapper">
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_14.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_15.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_16.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_17.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_18.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_19.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_20.jpg" />
						</div>
						<div class="swiper-slide swiper-slide1">
							<img src="images/pic_21.jpg" />
						</div>
					</div>
				</div>
			</div>
			<div style="display: flex;align-items: center;justify-content: center;margin-top: 4.125rem;">
				<span style="background: #ff4f00; padding: 0.625rem 4.625rem;border-radius: 80px;" class="blind-box-btn">
					<a href="#picture" style="color: #ffffff;display: block;">立即开盒</a>
				</span>
			</div>
			<div>
				<!-- 重抽卡 -->
				<div id="re-draw-card">
					<div class="re-draw-card-content">
						<div>
							<img src="images/pic_30.png" alt="" srcset="" />
							<div style="padding: 1.25rem;">
								<!--  -->
								<div style="background: #fee6ce;padding: 0.625rem;border-radius: 0.3125rem;margin-bottom: 0.625rem;">
									<div style="display: flex;align-items: center;justify-content: space-between;color: #844816;">
										<div
											style="display: flex;align-items: center;flex-direction: column;border-right: 1px dashed  #844816;
											padding-right: 0.625rem">
											<div>
												<span style="font-size: 1.25rem;font-weight: bold;">1</span>
												<span style="font-size: 0.75rem">张</span>
											</div>
										</div>
										<div>
											<div>新人大礼包</div>
										</div>
										<div>
											<span style="background: #ffffff;padding: 0.3125rem 0.625rem;border-radius: 2.5rem;font-size: 0.8125rem;">去使用</span>
										</div>
									</div>
								</div>
							<!--  -->
							<div style="background: #fee6ce;padding: 0.625rem;border-radius: 0.3125rem;margin-bottom: 0.625rem;">
								<div style="display: flex;align-items: center;justify-content: space-between;color: #844816;">
									<div
										style="display: flex;align-items: center;flex-direction: column;border-right: 1px dashed  #844816;
										padding-right: 0.625rem">
										<div>
											<span style="font-size: 1.25rem;font-weight: bold;">1</span>
											<span style="font-size: 0.75rem">张</span>
										</div>
									</div>
									<div>
										<div>新人大礼包</div>
									</div>
									<div>
										<span style="background: #ffffff;padding: 0.3125rem 0.625rem;border-radius: 2.5rem;font-size: 0.8125rem;">去使用</span>
									</div>
								</div>
							</div>
							<!--  -->
							</div>
						</div>
					</div>
					<img onclick="showReDrawCard()" src="images/ico_49.png" alt="" srcset=""
						style="width: 1.5625rem;margin-top: 0.625rem;" />
				</div>
				<!-- 优惠券 -->
				<div id="index-coupon">
					<div class="coupon-content">
						<div style="padding: 1.25rem;margin-top: 8.75rem">
							<!--  -->
							<div style="background: #fee6ce;padding: 0.625rem;border-radius: 0.3125rem;margin-bottom: 0.625rem;">
								<div style="display: flex;align-items: center;justify-content: space-between;color: #844816;">
									<div
										style="display: flex;align-items: center;flex-direction: column;border-right: 1px dashed  #844816;
										padding-right: 0.625rem">
										<div>
											<span style="font-size: 1.25rem;font-weight: bold;">1</span>
											<span style="font-size: 0.75rem">张</span>
										</div>
									</div>
									<div>
										<div>新人大礼包</div>
									</div>
									<div>
										<span style="background: #ffffff;padding: 0.3125rem 0.625rem;border-radius: 2.5rem;font-size: 0.8125rem;">去使用</span>
									</div>
								</div>
							</div>
						<!--  -->
						<div style="background: #fee6ce;padding: 0.625rem;border-radius: 0.3125rem;margin-bottom: 0.625rem;">
							<div style="display: flex;align-items: center;justify-content: space-between;color: #844816;">
								<div
									style="display: flex;align-items: center;flex-direction: column;border-right: 1px dashed  #844816;
									padding-right: 0.625rem">
									<div>
										<span style="font-size: 1.25rem;font-weight: bold;">1</span>
										<span style="font-size: 0.75rem">张</span>
									</div>
								</div>
								<div>
									<div>新人大礼包</div>
								</div>
								<div>
									<span style="background: #ffffff;padding: 0.3125rem 0.625rem;border-radius: 2.5rem;font-size: 0.8125rem;">去使用</span>
								</div>
							</div>
						</div>
						<!--  -->
						</div>
					</div>
					<img onclick="showCouponCard()" src="images/ico_49.png" alt="" srcset=""
						style="width: 1.5625rem;margin-top: 0.625rem;" />
				</div>
			</div>
			<!-- 支付 -->
			<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
				<div class="goods-details-model">
					<div style="text-align: center;padding: 0.625rem 0">确认支付</div>

					<div class="mui-row" style="padding: 0.625rem;">
						<div class="mui-col-xs-3">
							<img src="images/pic_27.jpg" alt="" style="width: 100%;" />
						</div>
						<div class="mui-col-xs-9" style="padding-left: 0.625rem;">
							<div class="title mb-2" style="	font-size: 0.9375rem;">苹果豪包</div>
							<div class="goods-price-group">
								<div style="display: flex;align-items: center;">
									<div><span>到手价￥</span>
										<span class="price">0.01</span>
									</div>
									<span class="ml-2">原价￥12999.00</span>
								</div>
								<div>已售 1000+</div>
							</div>
							<div style="font-size: 0.75rem;color: #999999;margin-top: 0.625rem;">
								该商品为开盒商品，不支持7天无理由退换货</div>
						</div>
					</div>
					<div class="mt-2 mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div>
					<!-- 	<div style="padding: 0.625rem;">
							<div
								style="display: flex;align-items: center;justify-content: space-between;font-size: 0.9375rem;">
								<div>优惠券</div>
								<a href=""
									style="display: flex;align-items: center;font-size: 0.75rem;color: #666666;">选择优惠券
									<img src="images/ico_15.png" alt=""
										style="width: 0.625rem;margin-left: 0.625rem;" />
								</a>

							</div>
						</div>
						<div class=" mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div> -->
					<div class="mui-card">
						<form class="mui-input-group">
							<div class="mui-input-row mui-radio">
								<label style="display: flex;align-items: center;">
									<img src="images/ico_42.png" alt="" style="width: 1.5rem;height: 1.5rem;margin-right: 0.625rem;" />
									微信</label>
								<input name="radio1" type="radio">
							</div>
							<div class="mui-input-row mui-radio">
								<label style="display: flex;align-items: center;">
									<img src="images/ico_43.png" alt="" style="width: 1.5rem;height: 1.5rem;margin-right: 0.625rem;" />
									支付宝</label>
								<input name="radio1" type="radio">
							</div>

						</form>
					</div>
					<a href="order-list.html" class="pay">立即支付 ￥：0.01</a>
					<!--  -->
				</div>


			</div>

		</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon">
					<img src="./images/ico_02_01.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item " href="recommend.html">
				<span class="mui-icon">
					<img src="./images/ico_04.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">推荐</span>
			</a>
			<a class="mui-tab-item " href="mall.html">
				<span class="mui-icon">
					<img src="./images/ico_05.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">商城</span>
			</a>
			<a class="mui-tab-item " href="blind-box.html">
				<span class="mui-icon">
					<img src="./images/ico_03.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">盲盒</span>
			</a>
			<a class="mui-tab-item" href="me.html">
				<span class="mui-icon">
					<img src="./images/ico_01.png" alt="" srcset="" />
				</span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
	<script src="js/mui.js"></script>
	<script src="js/swiper-bundle.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui('body').on('tap', 'a', function() {
			document.location.href = this.href;
		});
		var activeIndex = 1 // 当前是第几个silde 默认第一个
		// document.getElementById("activeIndexInnterHtml").innerHTML = activeIndex
		var swiper = new Swiper(".mySwiper", {
			spaceBetween: 10,
			slidesPerView: 3,
			watchSlidesProgress: true,
			freeMode: true,
			loop: true,
			centeredSlides: true, //居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
			on: {
				slideChangeTransitionEnd: function() {

					console.log(this.activeIndex); //切换结束时现在是第几个slide
					// document.getElementById("activeIndexInnterHtml").innerHTML = activeIndex
				},
				click: function(swiper, event) {
					// console.log(this.getTranslate()); //获取偏移量
					// this.setTranslate(this.getTranslate()); //设定偏移量
					// console.log('-----------')
					// console.log(this.activeIndex)
					// console.log('-----------')
					// this.slideTo(activeIndex, 1000, false)
					// this.slideNext();
				},
			},
		});
		var swiper2 = new Swiper(".mySwiper2", {
			spaceBetween: 10,
			loop: true,
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
			thumbs: {
				swiper: swiper,
			},
			on: {
				slideChangeTransitionEnd: function() {
					// console.log(this.activeIndex); //切换结束时现在是第几个slide
					activeIndex = this.activeIndex

					// document.getElementById("activeIndexInnterHtml").innerHTML = activeIndex
				},
			},
		});
		// 支付model
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
		// 重抽卡model
		var ReDrawCard = document.getElementById('re-draw-card')
		ReDrawCard.style.display = 'none';

		function showReDrawCard() {
			if (ReDrawCard.style.display === 'none') {
				ReDrawCard.style.display = 'flex';
			} else {
				ReDrawCard.style.display = 'none';
			}
		}
		// 优惠券
		var coupon = document.getElementById('index-coupon')
		coupon.style.display = 'none';

		function showCouponCard() {
			if (coupon.style.display === 'none') {
				coupon.style.display = 'flex';
			} else {
				coupon.style.display = 'none';
			}
		}
	</script>
</html>